<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>确认订单 - <{$common.site_name}></title>
<link rel="stylesheet" type="text/css" href="<{$common.theme}>/style/general.css" />
<link rel="stylesheet" type="text/css" href="<{$common.theme}>/style/order.css" />
<script type="text/javascript" src="<{$common.theme}>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<{$common.theme}>/js/general.js"></script>
<script type="text/javascript" src="<{$common.theme}>/js/juicer.js"></script>
<script type="text/javascript" src="<{$common.theme}>/js/consignee.js"></script>
<script type="text/javascript">
$(function(){
  initAreaSelect();
  //选择省份
  $('#province').change(function(){
    if(this.value == ""){
      $('#city').empty().val('');
      $('#borough').empty().val('');
      return false;
    }
    $('#borough').empty().val('');
    getAreaSelect('city', '&province='+$(this).val());
  });
  //选择城市
  $('#city').change(function(){
    if(this.value == ""){
      $('#borough').empty().val('');
      return false;
    }
    getAreaSelect('borough', '&province='+$('#province').val()+'&city='+$(this).val());
  });
  //当改变所选收件人地址时
  $('#consignee-list input[type="radio"]').change(function(){
    var cm = confirm('您确定要更换收件人地址吗？');
    if(cm == true){
      $('#consignee-list li.cur').removeClass('cur').find('input[type="radio"]').prop('checked', false);
      $(this).prop('checked', true).closest('li').addClass('cur');
      cancelConsigneeForm('consignee-box', 'new-csg-btn');
    }
    else{
      $('#consignee-list li.cur').find('input[type="radio"]').prop('checked', true);
    }
  });
  //选择配送方式时
  $('#shipping_list input[type="radio"]').change(function(){
    var cm = confirm('您确定要更换配送方式吗？');
    if(cm == true){
      var consignee_id = $('#consignee-list input[type="radio"]:checked').val();
      if(typeof(consignee_id) == 'undefined'){
        alert('请先选择或新建一个收件人地址');
        return false;
      }
      $.ajax({
        type: "post",
        dataType: "text",
        url: "<{url c='cart' a='confirm' step='shipping'}>",
        data: {'shipping_method':$(this).val(), 'consignee_id':consignee_id},
        success: function(data){
          if(data >= 0) {
            $('#shipping_amount').text(data);
          } else {
            alert('无法获取运费');
          }
        },
        error: function(){alert('处理请求时发生错误');}
      });
						
      $('#shipping_list li.cur').removeClass('cur').find('input[type="radio"]').prop('checked', false);
      $(this).prop('checked', true).closest('li').addClass('cur');
    }
    else{
      $('#consignee-list li.cur').find('input[type="radio"]').prop('checked', true);
    }
  });
});

//保存收件人地址
function saveConsigneeForm(){
  if(checkConsigneeForm('consignee-form')){
    var form = $('#consignee-form'),
        province = $('#province option:selected').text(),
        city = $('#city option:selected').text(),
        borough = $('#borough option:selected').text();
    //发送保存数据
    var url = hostUrl+"/index.php?c=consignee&a="+form.data('action')+"&async=1";
    $.getJSON(url, form.serialize(), function(rs){
      if(rs.status == 'success'){
        rs.data.province = province;
        rs.data.city = city;
        rs.data.borough = borough;
        if(form.data('action') == 'edit'){
          $('#consignee-list li.cur').remove();
        }
        else{
          $('#consignee-list li.cur').removeClass('cur').find('input[type="radio"]').prop('checked', false);
        }
        $('#consignee-list').append(juicer($('#csgrow-tpl').html(), rs.data));
        cancelConsigneeForm('consignee-box', 'new-csg-btn');
      }
      else{
        alert(rs.data);
      }
    });
  }
}
//统计订单总金额
function countAmount(){
  var goods = $('#goods_amount').text(), shipping = $('#shipping_amount').text(), order = 0.00;
  order = goods + shipping;
  $('#order_amount').text(order);
}

//提交订单
function submitOrder(){
  var consignee = $('#consignee-list input[name="consignee_select"]:checked').val(),
      shipping = $('#shipping_list input[name="shipping_method"]:checked').val(),
      payment = $('#payment_list input[name="payment_method"]:checked').val(),
      memos = $('#memos').val(),
      error = 0;
			
  $('#order-form input[name="consignee_id"]').val(consignee);
  $('#order-form input[name="shipping_method"]').val(shipping);
  $('#order-form input[name="payment_method"]').val(payment);
  $('#order-form input[name="memos"]').val(memos);
  
  $('#order-form input[type="hidden"]').not('input[name="memos"]').each(function(){
    if(this.value == '' || typeof(this.value) == 'undefined'){
      error ++;
      alert($(this).data('err'));
      return false;
    }
  });
  if(error == 0) $('#order-form').submit();
}
</script>
</head>
<body>
<!-- 顶部开始 -->
<{layout_topper common=$common}>
<!-- 顶部结束 -->
<!-- 头部开始 -->
<div class="header">
  <div class="w1100 cut">
    <div class="logo fl"><a href="<{$common.url}>"><img src="<{$common.theme}>/images/logo.gif" /></a></div>
    <div class="step cut">
      <ul>
        <li>我的购物车</li>
        <li class="cur">确认订单</li>
        <li>完成付款</li>
      </ul>
    </div>
  </div>
</div>
<!-- 头部结束 -->
<!-- 主体开始 -->
<div class="container w1100 mt30">
  <!-- 收件地址开始 -->
  <div class="consignee cut">
    <div class="th">
      <h2>收件地址信息</h2>
    </div>
    <div class="selection module">
      <ul id="consignee-list">
        <{foreach $consignee_list as $v}>
        <{if $v.is_default == 1}>
        <li class="cur"> <span class="c999 fr"><a onclick="getConsigneeInfo('consignee-box', '<{$v.id}>')">编辑此地址</a></span>
          <label>
            <input class="mr5" type="radio" name="consignee_select" value="<{$v.id}>" checked="checked" />
            <b class="mr10"><{$v.name}></b> <{$v.area.province}> <{$v.area.city}> <{$v.area.borough}> <{$v.address}> <font class="c666 ml10">(联系电话：<{if !empty($v.mobile_no)}><{$v.mobile_no}><{else}><{$v.tel_no}><{/if}>)</font>
          </label>
        </li>
        <{else}>
        <li>
          <span class="c999 fr"><a onclick="getConsigneeInfo('consignee-box', '<{$v.id}>')">编辑此地址</a></span>
          <label>
            <input class="mr5" type="radio" name="consignee_select" value="<{$v.id}>" />
            <b class="mr10"><{$v.name}></b> <{$v.area.province}> <{$v.area.city}> <{$v.area.borough}> <{$v.address}> <font class="c666 ml10">(联系电话：<{if !empty($v.mobile_no)}><{$v.mobile_no}><{else}><{$v.tel_no}><{/if}>)</font>
          </label>
        </li>
        <{/if}>
        <{/foreach}>
      </ul>
      <div class="add-btn"><button type="button" class="sm-blue" id="new-csg-btn" onclick="showConsigneeForm('consignee-box', 'add')">+ 新建收件人地址</button></div>
    </div>
    <div class="consignee-form cut hide" id="consignee-box">
      <form id="consignee-form">
        <input type="hidden" name="id" value="" />
        <dl>
          <dt><label for="name">收件人：</label></dt>
          <dd><input title="收件人" name="name" type="text" class="w200 txt" /></dd>
        </dl>
        <dl>
          <dt>收件地区：</dt>
          <dd>
            <select title="选择省份" name="province" class="slt" id="province"></select>
            <select title="选择城市" name="city" class="slt" id="city"></select>
            <select title="选择区/县" name="borough" class="slt" id="borough"></select>
          </dd>
        </dl>
        <dl>
          <dt>详细地址：</dt>
          <dd><input title="详细地址" name="address" id="address" type="text" class="w400 txt" /></dd>
        </dl>
        <dl>
          <dt>邮政编码：</dt>
          <dd><input name="zip" type="text" class="w100 txt" id="zip" /></dd>
        </dl>
        <dl>
          <dt>手机：</dt>
          <dd><input name="mobile_no" type="text" class="w200 txt" id="mobile_no" /></dd>
        </dl>
        <dl>
          <dt>固定电话：</dt>
          <dd><input name="tel_no" type="text" class="w200 txt" id="tel_no" /></dd>
        </dl>
        <div class="consignee-btns mt10">
          <button type="button" class="sm-blue mr10" onclick="saveConsigneeForm()">保存收件地址</button>
          <button type="reset" class="sm-gray" onclick="cancelConsigneeForm('consignee-box', 'new-csg-btn')">取消</button>
        </div>
      </form>
    </div>
  </div>
  <script type="text/template" id="csgrow-tpl">
    <li class="cur">
      <span class="c999 fr"><a onclick="getConsigneeInfo(${id})">编辑此地址</a></span>
      <label>
        <input class="mr5" type="radio" name="consignee_select" value="${id}" checked="checked" onchange="changeConsignee(this)" /> 
        <b class="mr10">${name}</b>${province} ${city} ${borough} ${address}
        <font class="c666 ml10">(联系电话：{@if mobile_no != ''}${mobile_no}{@else}${tel_no}{@/if})</font>
      </label>
    </li>
  </script>
  <!-- 收件地址结束 -->
  <!-- 包裹清单开始 -->
  <div class="parcel cart odmod mt10">
    <div class="th cut">
      <h2 class="fl">包裹清单</h2>
      <div class="fr"><a title="返回购物车修改" href="<{url c='cart' a='index'}>"><i class="icon"></i></a></div>
    </div>
    <div class="module">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <th colspan="2">商品</th>
          <th width="130">价格(元)</th>
          <th width="130">数量</th>
          <th width="130">小计(元)</th>
        </tr>
        <{foreach $parcel.item as $k => $v}>
        <tr>
          <td width="80"><a href="<{url c='goods' a='index' id=$v.goods_id}>" target="_blank"><img class="gim" src="<{url c='image' a='index' i=$v.goods_image s='50x50'}>" /></a></td>
          <td>
            <div class="aln-l">
              <a href="<{url c='goods' a='index' id=$v.goods_id}>" target="_blank"><{$v.goods_name}></a>
              <p class="opts c999 mt5"><{foreach $v.opts as $vv}><span class="mr5">[<{$vv.type}>: <font class="c666"><{$vv.opt_text}></font>]</span><{/foreach}></p>
            </div>
          </td>
          <td><font class="unit-price"><{$v.now_price}></font></td>
          <td><{$v.qty}></td>
          <td><{$v.subtotal}></td>
        </tr>
        <{/foreach}>
      </table>
    </div>
    <div class="parcel-form module">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td class="aln-r" width="70"><b>留言备注：</b></td>
          <td class="aln-l"><textarea id="memos" cols="58" rows="3" placeholder="选填：内容不能超过240个字符"></textarea></td>
        </tr>
      </table>
    </div>
  </div>
  <!-- 包裹清单结束 -->
  <!-- 配送方式开始 -->
  <div class="odmod mt10 cut">
    <div class="th">
      <h2>配送方式</h2>
    </div>
    <div class="selection module">
      <ul id="shipping_list">
        <{foreach $shipping_method_list as $v}>
        <li><label><input class="mr5" type="radio" name="shipping_method" value="<{$v.id}>" /><{$v.name}></label><font class="ml10 c999"><{$v.instruction}></font></li>
        <{/foreach}>
      </ul>
    </div>
  </div>
  <!-- 配送方式结束 -->
  <!-- 支付方式开始 -->
  <div class="odmod mt10 cut">
    <div class="th"><h2>支付方式</h2></div>
    <div class="selection module">
      <ul id="payment_list">
        <{foreach $payment_method_list as $v}>
        <li><label><input class="mr5" type="radio" name="payment_method" value="<{$v.id}>" /><{$v.name}></label><font class="ml10 c999"><{$v.instruction}></font></li>
        <{/foreach}>
      </ul>
    </div>
  </div>
  <!-- 支付方式结束 -->
  <!-- 费用总计开始 -->
  <div class="total mt10 cut">
    <div class="th"><h2>订单合计</h2></div>
    <div class="module mt10 cut">
      <dl>
        <dt>商品合计：</dt>
        <dd><i>¥</i><font id="goods_amount"><{$parcel.total_amount}></font></dd>
      </dl>
      <dl>
        <dt>运费合计：</dt>
        <dd><i>¥</i><font id="shipping_amount">0.00</font></dd>
      </dl>
      <dl>
        <dt>应付款金额总计：</dt>
        <dd class="count"><i>¥</i><font id="order_amount"><{$parcel.total_amount}></font></dd>
      </dl>
    </div>
  </div>
  <!-- 费用总计结束 -->
  <form method="post" id="order-form" action="<{url c='cart' a='confirm' step='submit'}>">
    <input type="hidden" name="consignee_id" data-err="请选择一个收件人地址！" />
    <input type="hidden" name="shipping_method" data-err="请选择一个配送方式！" />
    <input type="hidden" name="payment_method" data-err="请选择一个支付方式！" />
    <input type="hidden" name="memos" />
    <div class="aln-c mt20"><a class="checkout-btn" onclick="submitOrder()">确认并提交订单</a></div>
  </form>
</div>
<!-- 主体结束 -->
<div class="cl"></div>
<!-- 页脚开始 -->
<{layout_footer}>
<!-- 页脚结束 -->
</body>
</html>